<template>
  <view class="header-bg" :style="{backgroundImage: `url(${ getImg('my-top_back.png')})`}" >
    <u-navbar height="37" :placeholder="true" bgColor="rgba(0,0,0,0)" :autoBack="true">
      <view slot="left"></view>
    </u-navbar>
    <view class="u-flex w-full u-row-between relative "
    @click="handleUserInfo"
     style="top:-2px;">
      <view class="u-flex ">
        <view class="avatar-border">
            <u-image v-if="useinfo.wxUser.headPictureUrl" :src="useinfo.wxUser.headPictureUrl" width="154rpx" height="154rpx" shape="circle"></u-image>
        </view>
        <view class="user-info">
          <text class="user-name" v-if="useinfo.wxUser.nickName">{{useinfo.wxUser.nickName}}</text>
          <text class="user-name" v-else >请登录</text>
          <text class="user-phone" v-if="useinfo.wxUser.mobile">{{maskedPhone}}</text>
        </view>
      </view>
      <view class="u-flex u-row-right" @click="goToPersonal">
        <u-icon name="arrow-right" size="20" color="#C0DEFF"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
import my_active from '@/static/my_active.png'
import {
  mapState,
  mapMutations,
  mapActions
} from 'vuex'

export default {
 
  name: 'MyHead',
  props: {
    useinfo: {
      type: Object,
      default: () => {}
    }
  },
  data(){
    return {
      myActive:my_active
    }
  },
  watch: {
    useinfo: {
      handler(newVal) {
      
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    ...mapState("community",[
      "communityId"
    ]),
    maskedPhone() {
     
      const phone = this.useinfo?.wxUser?.mobile;
    
      if (phone && phone.length === 11) {
        return phone.substring(0, 3) + '****' + phone.substring(7);
      }
      return phone;
    }
  },
  methods: {
    ...mapActions("app",["isLogin"]),
    ...mapActions("community",["checkLoginNotHouse"]),
   async handleUserInfo(){
     console.log("2222",this.useinfo)
      if(this.useinfo.openId!=""){
        uni.navigateTo({
          url: '/pages/personal/index'
        })
      }else{
       let communityId=this.communityId
       if(communityId==-1){
        uni.showModal({
					title:"选择小区",
					content:"您还未选择小区，是否去选择小区？",
					success:({confirm})=>{
						if(confirm){
							uni.navigateTo({
								url:"pages/choosecommunity/index"
							})
						}
					}
				})
        return 
       }
        
        uni.navigateTo({
          url: '/pages/login/index'
        })
      }
    },
     async  goToPersonal(){
         let bo=await this.isLogin()
         if(bo){
          uni.navigateTo({
            url: '/pages/personal/index'
          })
         }
      } 
  }
}
</script>

<style lang="scss" scoped>
.header-bg {
  padding: 0 34rpx;
  width: 100%;
  height: 438rpx;
  position: relative;
  text-align: center;
  background-size: 100% 100%;
}
.avatar-border {
  width: 154rpx;
  height: 154rpx;
  border-radius: 50%;
  padding: 6rpx;
  background: linear-gradient(180deg, rgba(185, 201, 238, 1), rgba(117, 153, 236, 1));
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.user-info {
  color: #fff;
  margin-bottom: 10rpx;
  margin-left: 35rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.user-name {
  font-size: 44rpx;
  color: #fff;
  font-weight: 400;
}
.user-phone {
  margin-top: 9rpx;
  font-size: 28rpx;
  opacity: 0.8;
  display: block;
  font-size: 400;
}
</style>
